<template>
    <div class="koi-toast-mask" v-show="visible > -1" :class="customClass">
        <!-- 蒙版 -->
        <div class="toast-mask" :class="visible == 0 && 'anim-opaciity'" v-if="maskFlag"></div>
        <!-- 内容 -->
        <div class="toast-content" ref="content" :class="visible == 0 && 'anim-opaciity'">
            <div class="toast-box">
                <div class="toast-icon" v-show="iconClass !== ''">
                    <span :class="iconClass"></span>
                </div>
                <span class="toast-text" v-html="message"></span>
            </div>
        </div>
    </div>
</template>

<style lang="less">
.koi-toast-mask {
    .toast-mask {
        z-index: 10999;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        transition: opacity 0.3s linear;
        // opacity: 0.1;
    }

    // 默认居中
    .toast-content {
        position: fixed;
        left: 0;
        right: 0;
        z-index: 11000;
        bottom: 50%;
        transform: translateY(50%);
        text-align: center;
        transition: opacity 0.3s linear;
        // opacity: 0.1;
    }

    .toast-box {
        display: inline-block;
        margin: 0 auto;
        max-width: 80%;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        box-sizing: border-box;
        text-align: center;
        padding: 0 20px 10px 20px;
    }

    .toast-icon {
        padding-top: 10px;
    }

    .toast-text {
        padding-top: 10px;
        font-size: 14px;
        display: block;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .anim-opaciity {
        opacity: 0 !important;
    }

    &.is-bottom {
        .toast-content {
            bottom: 50px;
            transform: none;
        }
    }
    &.is-top {
        .toast-content {
            top: 50px;
            bottom: auto;
            transform: none;
        }
    }
}
</style>

<script>
export default {
    props: {
        // 显示蒙版
        maskFlag: {
            type: Boolean,
            default: true
        },
        // toast 消息
        message: {
            type: String,
            default: ''
        },
        // toast 位置 bottom 、middle、 top
        position: {
            type: String,
            default: 'bottom'
        },
        // toast 增加一个显示icon的地方
        iconClass: {
            type: String,
            default: ''
        }
    },

    methods: {
        // 关不toast
        close: function(flag = 0) {
            if (flag == 0) {
                // 动画关闭
                this.visible = 0

                this.$refs.content.addEventListener('transitionend', () => {
                    this.visible = -1
                    this.$nextTick(() => {
                        this.$emit("animEnd")
                    })
                })
                return
            }
            this.visible = -1
            this.$emit("animEnd")
        }
    },

    data() {
        return {
            // 显示 隐藏 toast
            // -1 不显示 0 关闭动画 1显示
            visible: 0
        }
    },

    computed: {
        customClass() {
            return 'is-' + this.position
        }
    }
}
</script>